<template>
    <div id="mySlot">
        slot

        <div class="container">
            <header class="red">
                <slot name="header"></slot>
            </header>
            <main class="green">
                <slot></slot>
            </main>
            <footer class="blue">
                <slot name="footer"></slot>
            </footer>
        </div>
    </div>
</template>
<script>
    export default {
        name: "mySlot",
        components: {},
        data() {
            return {};
        },
        mounted(){
            console.log('this', this);
        }
    };
</script>
<style scoped>
    .red {
        color: red
    }

    .green {
        color: green
    }

    .blue {
        color: blue
    }
</style>